<style>    
    .fa-fw{
        margin-left: 20px;
    }
    .basicinfo {
        margin: 15px 0;
    }

    .basicinfo .row > .col-xs-4 {
        padding-right: 0;
    }

    .basicinfo .row > div {
        margin: 5px 0;
    }

    .liouter {
        width: 100%;
        display: inline-block;
        padding: 8px 0;
        border-radius: 4px;
        border: 1px solid rgb(211, 220, 235);
    }

    .ptouter {
        float: left;
    }

    .mul-small-outer {
        float: left;
        margin-left: 8px;
    }

    .pt-img {
        float: left;
        margin-left: 8px;
    }

    .split {
        float: left;
        height: 20px;
        border-left: 1px solid #ddd;
        margin-top: 7px;
        margin-left: 8px;
    }
</style>
<div id="content-container" class="container">
    <div class="row">
        <!-- <div class="col-md-3">
            {include file="common/sidenav" /}
        </div> -->
        <div class="col-md-12">
            <div class=" panel-default ">
                <div class="panel-body">
                    <h2 class="page-header">
                        <i class="fa fa-bar-chart fa-fw"></i> {:__('流量情况')}
                        
                    </h2>                    
                    <div class="row" style="display: none">
                        <div class="col-md-12">
                            <div id="pt1" class="col-md-3 ptouter" style="max-width: 240px">
                                <div class="liouter cl_pt1">
                                    <div class="pt-img">
                                        <a href="javascript:popupwindow('/cgi-bin/Monitor/popup_app', 500, 680)">
                                            <img src="/assets/img/inout.gif" title="流量速率">
                                        </a>
                                    </div>
                                    <div style="float:left; margin-left: 8px">
                                        <div class="title2">上行</div>
                                        <div class="cont" id="dvout">0</div>
                                    </div>
                                    <div class="split"></div>
                                    <div class="mul-small-outer">
                                        <div class="title2">下行</div>
                                        <div class="cont" id="dvin">0</div>
                                    </div>
                                </div>
                            </div>
                            <div id="pt2" class="col-md-4 ptouter mw">
                                <div class="liouter cl_pt1">
                                    <div class="pt-img">
                                        <a href="javascript:popupwindow('/cgi-bin/Monitor/popup_flow', 500, 580)"><img src="/assets/img/flow.gif" title="连接数"></a>
                                    </div>
                                    <div style="float:left; margin-left: 8px">
                                        <div class="title2">连接数</div>
                                        <div class="cont" id="dvflow">0</div>
                                    </div>
                                    <div class="split"></div>
                                    <div class="mul-small-outer">
                                        <div class="title2">TCP</div>
                                        <div class="cont" id="dvtcp">0</div>
                                    </div>
                                    <div class="split"></div>
                                    <div class="mul-small-outer">
                                        <div class="title2">UDP</div>
                                        <div class="cont" id="dvudp">0</div>
                                    </div>
                                    <div class="split"></div>
                                    <div class="mul-small-outer">
                                        <div class="title2">ICMP</div>
                                        <div class="cont" id="dvicmp">0</div>
                                    </div>
                                </div>
                            </div>
                            <div id="pt3" class="col-md-2 ptouter mw">
                                <div class="liouter cl_pt1">
                                    <div class="pt-img">
                                        <a href="javascript:popupwindow('/cgi-bin/Monitor/popup_user', 500, 600)"><img src="/assets/img/user.gif" title="在线用户"></a>
                                    </div>
                                    <div style="float:left; margin-left: 8px">
                                        <div class="title2">当前</div>
                                        <div class="cont" id="dvuser">0</div>
                                    </div>
                                    <div class="split"></div>
                                    <div class="mul-small-outer">
                                        <div class="title2">峰值</div>
                                        <div class="cont" id="dvusermax">0</div>
                                    </div>
                                </div>
                            </div>
                            <div id="pt4" class="col-md-3 ptouter mw">
                                <div class="liouter cl_pt1">
                                    <div class="pt-img">
                                        <a href="javascript:popupwindow('/cgi-bin/Monitor/popup_pps', 500, 600)"><img src="/assets/img/pps.gif" title="PPS趋势"></a>
                                    </div>
                                    <div style="float:left; margin-left: 8px">
                                        <div class="title2">PPS</div>
                                        <div class="cont" id="dvpps">0</div>
                                    </div>
                                    <div class="split"></div>
                                    <div class="mul-small-outer">
                                        <div class="title2">SYN</div>
                                        <div class="cont" id="dvsyn">0</div>
                                    </div>
                                    <div class="split"></div>
                                    <div class="mul-small-outer">
                                        <div class="title2">SYN ACK</div>
                                        <div class="cont" id="dvsynack">0</div>
                                    </div>
                                </div>
                            </div>    
                        </div>
                    </div>
                    <div class="row">                    
                        <div class="col-md-12 col-sm-9 col-xs-10">
                            <!-- Content -->
                            <div class="ui-content">
                                
                                <!-- Success -->
                                <div class="basicinfo">
                                    <!-- 饼图 -->
                                    <div class="row">
                                        <div class="col-md-6">

                                            <div style="height:400px;" id="flow"></div>                                            
                                        </div>
                                        <div class="col-md-6">

                                            <div style="height:400px;" id="connect"></div>                                            
                                        </div>                                        
                                    </div>
                                    <!-- 流量趋势图 -->
                                    <!-- 下行 -->
                                    <div class="row" style="display: none;">
                                       <div class="col-md-12">
                                            下行流量趋势
                                            <center>
                                                <div id="flow_down" style="height:300px;">
                                                </div>
                                            </center>
                                       </div> 
                                    </div>

                                    <div class="row" style="display: none;">
                                       <div class="col-md-12">
                                            上行流量趋势
                                            <center>
                                                <div id="flow_up" style="height:300px;">
                                                </div>
                                            </center>
                                       </div> 
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>